<template>
  <el-card class="box-card">
    <el-row :gutter="10">
      <el-col :span="6">
        <el-input v-model="nameSearch" placeholder="请输入关键词"></el-input>
      </el-col>
      <div class="btn">
        <el-button type="info">重置</el-button>
        <el-button type="primary" @click="listByPage()">查询</el-button>
        <el-button
          type="success"
          @click="
            title = '新增考卷';
            qListByPage();
            centerDialogVisible = true;
          "
          >新增</el-button
        >
      </div>
    </el-row>
  </el-card>

  <el-card class="box-card2">
    <el-table :data="paperData" style="width: 100%">
      <el-table-column align="center" fixed prop="id" label="序号"> </el-table-column>

      <el-table-column align="center" prop="name" label="卷名"> </el-table-column>

      <el-table-column align="center" prop="avaScore" label="平均分"> </el-table-column>

      <el-table-column align="center" prop="count" label="学习次数"> </el-table-column>

      <el-table-column align="center" prop="creatTime" label="创建时间">
      </el-table-column>

      <el-table-column align="center" prop="type" label="状态"> </el-table-column>

      <el-table-column label="操作" fixed="right" width="120" align="center">
        <template #default="{ row }">
          <!-- 修改 -->
          <el-button type="primary" :icon="Edit" @click="getById(row.id)" circle />

          <el-popconfirm
            title="确定要删除该数据吗？"
            @cancel="ElMessage('您取消了删除')"
            @confirm="deleteById(row.id)"
          >
            <template #reference>
              <el-button type="danger" :icon="Delete" circle />
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>

      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <!-- 页码导航栏 -->
    <el-pagination
      class="fenye"
      @current-change="handleCurrentChange"
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[2, 4, 6, 8]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </el-card>

  <!-- 弹出表单 -->
  <el-dialog v-model="centerDialogVisible" :title="title" width="1200" fullscreen>
    <!-- 内容 -->
    <div>
      <el-form :model="paperForm" label-width="100px">
        <el-form-item label="试卷名称：" prop="name">
          <el-input
            v-model="paperForm.name"
            placeholder="请输入卷名"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-tabs v-model="activeName" type="card" class="demo-tabs">
          <el-tab-pane
            label="题库"
            @click="activeName = 'tab1'"
            name="tab1"
          ></el-tab-pane>
          <el-tab-pane
            label="已选考题"
            @click="activeName = 'tab2'"
            name="tab2"
          ></el-tab-pane>
        </el-tabs>
        <el-form-item>
          <el-text class="mx-1" size="large" type="primary"
            >已选择 {{ paperForm.questions.length }} 条考题</el-text
          >
        </el-form-item>
        <!-- 选择题目 -->
        <el-form-item prop="questions" v-show="activeName == 'tab1'">
          <el-button type="primary" @click="selectQUestionsToData">上传考题</el-button>
          <el-table
            :data="questionData"
            style="width: 100%"
            @selection-change="selectChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column align="center" fixed prop="id" label="序号">
            </el-table-column>
            <el-table-column
              align="center"
              fixed
              width="150"
              label="题目"
              #default="{ row }"
            >
              <el-popover
                placement="top-start"
                title="题目："
                :width="200"
                trigger="hover"
                :content="row.topic"
              >
                <template #reference>
                  <el-button class="m-2">{{ row.topic.slice(0, 7) }}</el-button>
                </template>
              </el-popover>
            </el-table-column>

            <el-table-column
              align="center"
              prop="a"
              width="150"
              label="A"
              #default="{ row }"
            >
              <el-popover
                placement="top-start"
                title="选项A："
                :width="200"
                trigger="hover"
                :content="row.a"
              >
                <template #reference>
                  <el-button class="m-2">{{ row.a.slice(0, 7) }}</el-button>
                </template>
              </el-popover>
            </el-table-column>

            <el-table-column
              align="center"
              prop="b"
              width="150"
              label="B"
              #default="{ row }"
            >
              <el-popover
                placement="top-start"
                title="选项B："
                :width="200"
                trigger="hover"
                :content="row.b"
              >
                <template #reference>
                  <el-button class="m-2">{{ row.b.slice(0, 7) }}</el-button>
                </template>
              </el-popover>
            </el-table-column>

            <el-table-column
              align="center"
              prop="c"
              width="150"
              label="C"
              #default="{ row }"
            >
              <el-popover
                placement="top-start"
                title="选项C："
                :width="200"
                trigger="hover"
                :content="row.c"
              >
                <template #reference>
                  <el-button class="m-2">{{ row.c.slice(0, 7) }}</el-button>
                </template>
              </el-popover>
            </el-table-column>

            <el-table-column
              align="center"
              prop="d"
              width="150"
              label="D"
              #default="{ row }"
            >
              <el-popover
                placement="top-start"
                title="选项D："
                :width="200"
                trigger="hover"
                :content="row.d"
              >
                <template #reference>
                  <el-button class="m-2">{{ row.d.slice(0, 7) }}</el-button>
                </template>
              </el-popover>
            </el-table-column>

            <el-table-column
              align="center"
              prop="e"
              width="150"
              label="E"
              #default="{ row }"
            >
              <el-popover
                placement="top-start"
                title="选项E："
                :width="200"
                trigger="hover"
                :content="row.e"
              >
                <template #reference>
                  <el-button class="m-2">{{ row.e.slice(0, 7) }}</el-button>
                </template>
              </el-popover>
            </el-table-column>

            <el-table-column align="center" prop="answer" label="答案"> </el-table-column>

            <el-table-column align="center" prop="type" label="题型"> </el-table-column>

            <el-table-column align="center" prop="qtypeId" label="分类">
            </el-table-column>

            <template #empty>
              <el-empty description="没有数据" />
            </template>
          </el-table>
          <el-pagination
            class="fenye"
            @current-change="handleCurrentChange2"
            v-model:current-page="pageNum"
            v-model:page-size="pageSize"
            :page-sizes="[2, 4, 6, 8]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total2"
          >
          </el-pagination>
        </el-form-item>

        <!-- 已选择考题 -->
        <el-form-item prop="questions" v-show="activeName == 'tab2'">
          <el-button type="danger">删除考题</el-button>
          <el-scrollbar max-height="400px">
            <el-table
              :data="paperForm.questions"
              style="width: 100%"
              @selection-change="selectChange"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column align="center" fixed prop="id" label="序号">
              </el-table-column>
              <el-table-column
                align="center"
                fixed
                width="150"
                label="题目"
                #default="{ row }"
              >
                <el-popover
                  placement="top-start"
                  title="题目："
                  :width="200"
                  trigger="hover"
                  :content="row.topic"
                >
                  <template #reference>
                    <el-button class="m-2">{{ row.topic.slice(0, 7) }}</el-button>
                  </template>
                </el-popover>
              </el-table-column>

              <el-table-column
                align="center"
                prop="a"
                width="150"
                label="A"
                #default="{ row }"
              >
                <el-popover
                  placement="top-start"
                  title="选项A："
                  :width="200"
                  trigger="hover"
                  :content="row.a"
                >
                  <template #reference>
                    <el-button class="m-2">{{ row.a.slice(0, 7) }}</el-button>
                  </template>
                </el-popover>
              </el-table-column>

              <el-table-column
                align="center"
                prop="b"
                width="150"
                label="B"
                #default="{ row }"
              >
                <el-popover
                  placement="top-start"
                  title="选项B："
                  :width="200"
                  trigger="hover"
                  :content="row.b"
                >
                  <template #reference>
                    <el-button class="m-2">{{ row.b.slice(0, 7) }}</el-button>
                  </template>
                </el-popover>
              </el-table-column>

              <el-table-column
                align="center"
                prop="c"
                width="150"
                label="C"
                #default="{ row }"
              >
                <el-popover
                  placement="top-start"
                  title="选项C："
                  :width="200"
                  trigger="hover"
                  :content="row.c"
                >
                  <template #reference>
                    <el-button class="m-2">{{ row.c.slice(0, 7) }}</el-button>
                  </template>
                </el-popover>
              </el-table-column>

              <el-table-column
                align="center"
                prop="d"
                width="150"
                label="D"
                #default="{ row }"
              >
                <el-popover
                  placement="top-start"
                  title="选项D："
                  :width="200"
                  trigger="hover"
                  :content="row.d"
                >
                  <template #reference>
                    <el-button class="m-2">{{ row.d.slice(0, 7) }}</el-button>
                  </template>
                </el-popover>
              </el-table-column>

              <el-table-column
                align="center"
                prop="e"
                width="150"
                label="E"
                #default="{ row }"
              >
                <el-popover
                  placement="top-start"
                  title="选项E："
                  :width="200"
                  trigger="hover"
                  :content="row.e"
                >
                  <template #reference>
                    <el-button class="m-2">{{ row.e.slice(0, 7) }}</el-button>
                  </template>
                </el-popover>
              </el-table-column>

              <el-table-column align="center" prop="answer" label="答案">
              </el-table-column>

              <el-table-column
                align="center"
                prop="type"
                label="题型"
                :formatter="
                  (row, column, cellValue) => {
                    return cellValue === 0
                      ? '单选题'
                      : cellValue === 1
                      ? '多选题'
                      : '未知题型';
                  }
                "
              >
              </el-table-column>

              <el-table-column
                align="center"
                prop="qtypeId"
                label="分类"
                :formatter="
                  (row, column, cellValue) => {
                    const q = qtypeData.find((element) => element.id == cellValue);
                    return q ? q.name : '未知';
                  }
                "
              >
              </el-table-column>

              <template #empty>
                <el-empty description="没有数据" />
              </template>
            </el-table>
          </el-scrollbar>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <!-- 按钮 -->
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false" size="large">取消</el-button>
        <el-button
          size="large"
          type="primary"
          @click="title == '新增考卷' ? addPaper(0) : editPaper()"
        >
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { questionListByPageService, questionTypeListService } from "@/api/answer";
import {
  addPaperService,
  listByPageService,
  paperDeleteByIdService,
  paperEditService,
  paperGetByIdService,
} from "@/api/paper";
import { Check, Delete, Edit, Message, Search, Star } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { ref } from "vue";

const pageNum = ref(1);
const pageSize = ref(8);
const total = ref(100);
//表单中的页码导航
const pageNum2 = ref(1);
const pageSize2 = ref(5);
const total2 = ref(100);

const title = ref();

const centerDialogVisible = ref(false); // 控制表单显现

const nameSearch = ref(); //查询卷名

const paperData = ref([]); //试卷集合
const questionData = ref([]); //考题集合
const qtypeData = ref([]); //分类集合

const topic = ref(); //题目
const type = ref(); //考题题型
const qtypeId = ref(); //考题分类id
const activeName = ref("tab1"); //表单查看题库或者已选考题
//试卷表单
const paperForm = ref({
  id: "",
  name: "",
  type: "",
  questions: [],
});
//存储已选考题中间值
const selectQuestions = ref([]);

//选中项发生变化
const selectChange = (selection) => {
  selectQuestions.value = selection;
  console.log(selectQuestions.value);
};
//上传选中考题到试卷
const selectQUestionsToData = () => {
  let targetSet = new Set(paperForm.value.questions);

  for (let item of selectQuestions.value) {
    //判断是否重复
    if (!targetSet.has(item)) {
      paperForm.value.questions.push(item);
      targetSet.add(item); // 更新 Set
      ElMessage.success("上传成功");
    } else {
      ElMessage.error("该考题已添加，请勿重复:" + item.topic);
    }
  }
};

//获取分页试卷
const listByPage = async () => {
  const data = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    name: nameSearch.value ? nameSearch.value : null,
  };
  let result = await listByPageService(data);
  paperData.value = result.data.data.items;
  total.value = result.data.data.total;
  console.log(paperData.value);
};
listByPage();

const handleCurrentChange = (num) => {
  //页数改变触发函数
  pageNum.value = num;
  listByPage();
};

//获取分页考题
const qListByPage = async () => {
  const data = {
    pageNum: pageNum2.value,
    pageSize: pageSize2.value,
    topic: topic.value ? topic.value : null,
    type: type.value ? type.value : null,
    qtypeId: qtypeId.value ? qtypeId.value : null,
  };
  //获取考题
  let result1 = await questionListByPageService(data);
  questionData.value = result1.data.data.items;
  total2.value = result1.data.data.total;
  //获取分类
  let result2 = await questionTypeListService();
  qtypeData.value = result2.data.data;

  //处理数据
  for (let i = 0; i < questionData.value.length; i++) {
    if (questionData.value[i].type == 0) {
      questionData.value[i].type = "单选题";
    } else {
      questionData.value[i].type = "多选题";
    }
    let found = false;
    for (let j = 0; j < qtypeData.value.length; j++) {
      if (questionData.value[i].qtypeId == qtypeData.value[j].id) {
        questionData.value[i].qtypeId = qtypeData.value[j].name;
        found = true;
        break; // 找到匹配项后可以跳出内层循环
      }
    }

    if (!found) {
      questionData.value[i].qtypeId = "暂无分类";
    }
  }
};
qListByPage();

//新增考卷函数
const addPaper = async (type) => {
  paperForm.value.type = type;

  let result = await addPaperService(paperForm.value);
  ElMessage.success(result.data.data);

  listByPage();
  centerDialogVisible.value = false;
};

//通过id获取考卷函数
const getById = async (id) => {
  let result = await paperGetByIdService(id);
  paperForm.value = result.data.data;
  paperForm.value.questions = paperForm.value.questionData;

  title.value = "修改考卷";
  centerDialogVisible.value = true;
};

//修改考卷函数
const editPaper = async () => {
  let result = await paperEditService(paperForm.value);
  ElMessage.success(result.data.data);

  listByPage();
  centerDialogVisible.value = false;
};

//根据id删除考卷函数
const deleteById = async (id) => {
  let result = await paperDeleteByIdService(id);
  ElMessage.success(result.data.data);

  listByPage();
};

//考题表格导航页码
const handleCurrentChange2 = (num) => {
  //页数改变触发函数
  pageNum2.value = num;
  qListByPage();
};
</script>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.avatar-uploader {
  :deep() {
    .avatar {
      width: 100px;
      height: 100px;
      display: block;
    }

    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      text-align: center;
    }
  }
}
.m-2 {
  border: none;
}

.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
.hd {
  height: 100px;
  background-color: #fff;
  margin-top: 15px;
  box-shadow: 0 -0.05333333rem 0.42666667rem 0 rgba(14, 86, 127, 0.09);
}

.box-card {
  margin-top: 15px;
}

.btn {
  margin-left: 20px;
}

.box-card2 {
  margin-top: 15px;
  height: 525px;
}

.fenye {
  margin-top: 30px;
  margin-left: 33%;
}

.ccc {
  width: 400px;

  margin: 10px auto;
  /*background-color: skyblue;*/
}

.preview {
  width: 95%;
}

.myprogress {
  margin-left: 50px;
}
</style>
